import * as React from "react";
import { BrowserRouter, useRoutes } from "react-router-dom";
import { WapHomeO, Idcard, ShoppingCartO, UserO } from "@react-vant/icons";

const Detail = React.lazy(() => import("../views/detail"));
const Login = React.lazy(() => import("../views/login"));
const Order = React.lazy(() => import("../views/order"));
const Search = React.lazy(() => import("../views/search"));

const Layout = React.lazy(() => import("../views/layout"));
const PayResult = React.lazy(() => import("../views/payResult"));

const Home = React.lazy(() => import("../views/home"));
const Cart = React.lazy(() => import("../views/cart"));
const Classify = React.lazy(() => import("../views/classify"));
const User = React.lazy(() => import("../views/user"));


export const layoutRoutes = [
  {
    path: "/",
    element: <Home></Home>,
    title: "首页",
    icon: <WapHomeO />,
  },
  {
    path: "/classify",
    element: <Classify></Classify>,
    title: "分类",
    icon: <Idcard />,
  },
  {
    path: "/cart",
    element: <Cart></Cart>,
    title: "购物车",
    icon: <ShoppingCartO />,
  },
  {
    path: "/user",
    element: <User></User>,
    title: "用户",
    icon: <UserO />,
  },
];
const routes = [
  {
    path: "/",
    element: <Layout></Layout>,
    children: layoutRoutes,
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/order/:price",
    element: <Order></Order>,
  },
  {
    path: "/search",
    element: <Search></Search>,
  },
  {
    path: "/pay/result",
    element: <PayResult></PayResult>,
  },
];

const Index: React.FC = () => {
  const RouterView = () => useRoutes(routes);
  return (
    <BrowserRouter>
      <React.Suspense>
        <RouterView></RouterView>
      </React.Suspense>
    </BrowserRouter>
  );
};

export default Index;
